<template>
  <div class="container">
    <form>
      <div class="form-group">
        <label>姓名</label>
        <input v-model="name" class="form-control" type="text" />
      </div>
      <div class="form-group">
        <label>颜值打分</label>
        <input v-model="score" class="form-control" type="text" />
      </div>
      <div class="form-group">
        <button @click="handleAdd" class="btn btn-primary" type="button">
          添加
        </button>
        <button class="btn btn-warning" type="reset">重置</button>
        <div class="pull-right">
          <button
            v-for="(item, index) in tabArr"
            :key="index"
            :class="['btn',{'btn-danger':scoreType==index}]"
            @click="handleTab(index)"
            type="button"
          >
            {{ item }}
          </button>
        </div>
      </div>
    </form>
    <table class="table table-bordered">
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>颜值</th>
        <th>操作</th>
      </tr>
      <tr v-if="starList.length == 0">
        <td colspan="4" class="text-center">没有任何数据~</td>
      </tr>
      <tr v-for="(item, index) in filterStarList" :key="index">
        <td>{{ index }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.score }}</td>
        <td>
          <button
            class="btn btn-danger btn-xs"
            type="button"
            name="button"
            @click="handleDel(index)"
          >
            删除
          </button>
        </td>
      </tr>
    </table>
    <div class="form-group text-right">
      <button
        class="btn btn-danger btn-sm"
        type="button"
        name="button"
        @click="starList=[]"
      >
        删除全部
      </button>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import request from '../utils/request'
import { starGet } from "../api/star";

//逻辑1. 新增功能
const name = ref("三丰");
const score = ref(100);
const starList = ref([]);

// 请求网络数据，并初始化starList
starGet().then(res=>{
  console.log(res);
  starList.value = res.data.results
})


const handleAdd = async () => {
  let starObj = {
    name: name.value,
    score: Number(score.value),
  }
  //发起网络请求
  await request.post('/classes/star',starObj)
  starList.value.push(starObj);
};

// 逻辑2：菜单切换
const scoreType = ref(0); //控制菜单切换
const tabArr = ["全部明星", "及格明星", "不及格明星"];
const handleTab = (idx)=>{
  scoreType.value = idx
}
const filterStarList = computed(()=>{
  if(scoreType.value==0){
    return starList.value   //所有明星
  }
  if(scoreType.value==1){
    let arr = starList.value.filter((item)=>{
      return item.score>=60 //此处的return为filter服务，返回值为true则保留数据，false剔除数据
    })
    return arr   //及格明星
  }
  if(scoreType.value==2){
    let arr = starList.value.filter((item)=>{
      return item.score<60 //此处的return为filter服务，返回值为true则保留数据，false剔除数据
    })
    return arr   //不及格明星
  }
})

// 逻辑3：删除一条数据
const handleDel = (idx)=>{
  starList.value.splice(idx,1)
}

// 逻辑4：删除全部
</script>

<style lang="scss" scoped>
/* @import "bootstrap/scss/bootstrap"; */
/* .containter {
  color: "";
} */
</style>
